.modal{

    // hack, very necessary though (adding and removing from DOM breaks video loading in safari)
    display:none;
    body.is-locked & { display:block; }

    // ============================================================================
    //   Variables
    // ============================================================================

    // $some-example-color: #f00;

    // ============================================================================
    //   Group
    // ============================================================================
    
    // &s{}

    // ============================================================================
    //   Single
    // ============================================================================
    
    position:fixed;
    z-index: 9999;
    left:0; top:0;
    width:100%; height:100%;
    background: rgba($color-ebony, 0.9);
    transition: all 800ms $bezier-blog-menu; 

    // ============================================================================
    //   Child Elements
    // ============================================================================

    &__content{
        position: absolute;
        left: 50%; top:50%;
        transform: translate(-50%, -50%);

        transition: all 500ms $bezier-blog-menu 500ms;
    }

    &__close{
        height: 50px; width: 50px;
        top:0; right:0;
        position:absolute;
        background-color: transparent;
        border-radius: 0 0 0 4px;
        transition: background-color 150ms ease, transform 300ms ease 800ms;
        cursor: pointer;

        &:before,
        &:after{
            content: "";
            position:absolute;
            left: 50%; top:50%;
            background: white;
            transform: rotate(45deg);
            transition: all 200ms $bezier-sweaty-elastic 500ms;
        }

        &:before{
            width: 20px;
            margin: -2px 0 0 -10px;
            height: 4px;
        }
        &:after{
            height: 20px;
            margin: -10px 0 0 -2px;
            width: 4px;
        }

    }


    // ============================================================================
    //   States
    // ============================================================================
    
    html.no-touch &__close:hover{
        background-color: rgba($color-parse-blue, 0.9);
    }

    &.is-hidden{
        transition: all 500ms $bezier-blog-menu;
        opacity:0;
        .modal__content{ 
            opacity:0;
            transform: translate(-50%, -50%) scale(0.8);
            transition: all 500ms $bezier-blog-menu;
        }
        .modal__close{
            transform: translateX(50px);
            transition: background-color 200ms ease, transform 500ms ease;

            &:before{ transform: rotate(0); }
            &:after{ transform: rotate(90deg); }
        }
    }


    // ============================================================================
    //   Media Queries
    // ============================================================================

    // @include break-min($break-tablet){}
    // @include break-min($break-desktop){}

}